<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分析生命周期</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <div>当前的n值是{{n}}</div>
        <button @click="add">点我n加一</button>
    </div>
    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',

            //一、template配置项的作用在于可以把容器中的html结构写在这里
            //二、template里面不可以有两个根节点所以里面的html结构要用一个div包起来,
            //也不可以使用<template></template>标作为根元素
            //三、template里的内容会完全替换掉 root 的div 和直接在 root div里写是不一样的
            template: '',
            data: {
                n: 1
            },
            methods: {
                add() {
                    this.n++;
                }
            },



            // 此时无法通过vm访问到data中的数据，methods中的方法
            beforeCreate() {
                console.log('beforeCreate');
            },


            // 此时可以通过vm访问到data中的数据，methods中的方法
            created() {

            },



            /* 
            在beforeMount阶段呈现的是未经vue编译的dom结构
            在beforeMount阶段对dom元素的所有操作最终都不奏效，因为接下来会被vue的虚拟dom替换掉 */
            beforeMount() {

            },



            /* 此时页面呈现的是经过vue编译的dom结构 
            对dom操作均有效（尽可能避免）
            至此初始化过程结束一般在此：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作*/
            mounted() {

            },


            // 此时数据是新的但页面是旧的，即页面尚未和数据保持同步
            beforeUpdate() {

            },

            // 此时数据是新的,页面也是新的，即页面和数据保持同步
            updated() {

            },


            //当vm.$destroyed()方法被调用时，可以调用下面的两个声明周期函数
            //官方对vm.$destroyed()方法的说法是：完全销毁一个实例，清理它与其他实例的连接,解绑它的全部指令和  事件监听器 (这里的事件指的是自定义事件而不包括原生dom操作事件)

            //需要注意的是：在大多数情况下最好不要使用这个方法，而应该最好使用v-if或者v-for指令以数据驱动的方式控制子组件的声明周期

            /* 此时vm中所有的 data methods 指令等等都可以使用   但此时对数据或方法的操作都不会再触发页面的更新了，因为马上要进入销毁过程，一般在此阶段关闭定时器，取消订阅事件，解绑自定义事件等收尾操作 */
            beforeDestroy() {

            },



            destroyed() {

            },

        });
    </script>
</body>

</html>